<template>
  <div>
    <el-image
      class="indexImg"
      src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/cooperation.png"></el-image>
    <div class="index_Content">
      <span class="index_Content_header">莆田餐巴产品体系</span>
      <div class="index_content_box">
        <div class="index_content_item">
          <div class="index_content_item_logo"></div>
          <div class="index_content_item_line"></div>
          <span class="index_content_item_title">芸订水</span>
          <span class="index_content_item_subtitle">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</span>
          <span class="index_content_item_bottomtitle">了解芸订水详情>></span>
        </div>
        <div class="index_content_item">
          <div class="index_content_item_logo"></div>
          <div class="index_content_item_line"></div>
          <span class="index_content_item_title">芸订水</span>
          <span class="index_content_item_subtitle">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</span>
          <span class="index_content_item_bottomtitle">了解芸订水详情>></span>
        </div>
        <div class="index_content_item">
          <div class="index_content_item_logo"></div>
          <div class="index_content_item_line"></div>
          <span class="index_content_item_title">芸订水</span>
          <span class="index_content_item_subtitle">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</span>
          <span class="index_content_item_bottomtitle">了解芸订水详情>></span>
        </div>
        <div class="index_content_item">
          <div class="index_content_item_logo"></div>
          <div class="index_content_item_line"></div>
          <span class="index_content_item_title">芸订水</span>
          <span class="index_content_item_subtitle">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</span>
          <span class="index_content_item_bottomtitle">了解芸订水详情>></span>
        </div>
      </div>
    </div>
    <div class="index_Conter">
      <span class="index_Content_header">莆田餐巴独特之处</span>
      <div class="index_content_box">
        <div class="index_content_conter">
          <div class="index_content_item_top"></div>
          <span class="index_content_top_bottomtitle">用技术联结和重构实体 产业生态圈</span>
          <span class="index_content_top_subtitle">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</span>

        </div>
        <div class="index_content_conter">
          <div class="index_content_item_top"></div>
          <span class="index_content_top_bottomtitle">用技术联结和重构实体 产业生态圈</span>
          <span class="index_content_top_subtitle">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</span>

        </div>
        <div class="index_content_conter">
          <div class="index_content_item_top"></div>
          <span class="index_content_top_bottomtitle">用技术联结和重构实体 产业生态圈</span>
          <span class="index_content_top_subtitle">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</span>

        </div>
        <div class="index_content_conter">
          <div class="index_content_item_top"></div>
          <span class="index_content_top_bottomtitle">用技术联结和重构实体 产业生态圈</span>
          <span class="index_content_top_subtitle">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</span>
        </div>
      </div>
    </div>
    <div class="index_Content">
      <span class="index_Content_header">媒体中心</span>
      <div class="index_content_boxTwo">
        <div class="index_content_bottom">
          <div class="index_content_bottom_logo"></div>
          <span class="index_content_item_title">芸订水</span>
          <ul type="circle" class="index_content_bottom_ui">
            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>
            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>
            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>
          </ul>
        </div>
        <div class="index_content_bottom">
          <div class="index_content_bottom_logo"></div>
          <span class="index_content_item_title">芸订水</span>
          <ul type="circle" class="index_content_bottom_ui">
            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>
            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>
            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>
          </ul>
        </div>
        <div class="index_content_bottom">
          <div class="index_content_bottom_logo"></div>
          <span class="index_content_item_title">芸订水</span>
          <ul type="circle" class="index_content_bottom_ui">
            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>
            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>
            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="index_skills">
      <div class="index_skills_box">
      <div class="index_skills_item">
        <div class="index_skills_item_img"></div>
        <span class="index_skills_item_title">技术领先</span>
        <span class="index_skills_item_subtitle">专业团队，借力研发</span>
      </div>
      <div class="index_skills_item">
        <div class="index_skills_item_img"></div>
        <span class="index_skills_item_title">技术领先</span>
        <span class="index_skills_item_subtitle">专业团队，借力研发</span>
      </div>
      <div class="index_skills_item">
        <div class="index_skills_item_img"></div>
        <span class="index_skills_item_title">技术领先</span>
        <span class="index_skills_item_subtitle">专业团队，借力研发</span>
      </div>
      <div class="index_skills_item">
        <div class="index_skills_item_img"></div>
        <span class="index_skills_item_title">技术领先</span>
        <span class="index_skills_item_subtitle">专业团队，借力研发</span>
      </div>
      <div class="index_skills_item">
        <div class="index_skills_item_img"></div>
        <span class="index_skills_item_title">技术领先</span>
        <span class="index_skills_item_subtitle">专业团队，借力研发</span>
      </div>
      <div class="index_skills_item">
        <div class="index_skills_item_img"></div>
        <span class="index_skills_item_title">技术领先</span>
        <span class="index_skills_item_subtitle">专业团队，借力研发</span>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>
  .indexImg{
    background: radial-gradient(black, transparent);
    display: block;
  }
  @media screen and (min-width: 0px) and (max-width: 329px) {
    .index_Content{
      background-color: rgb(237,237,237);
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Conter{
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Content_header{
      font-size: 21px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .index_content_box{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 130px;
      flex-wrap: wrap;
    }
    .index_content_boxTwo{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 320px;
      flex-wrap: wrap;
    }
    .index_content_item{
      width: 118px;
      height: 192px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .index_content_bottom{
      width: 200px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .index_content_item_line{
      width: 118px;
      height: 4px;
      background-color: rgb(0,181,255);
    }
    .index_content_item_logo{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
    }
    .index_content_bottom_logo{
      width: 50px;
      height: 50px;
      border-radius: 6px;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
    }
    .index_content_item_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 35px;
    }
    .index_content_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 83px;
      text-align: center;
      margin-top: 30px;
    }
    .index_content_item_bottomtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 10px;
    }
    .index_content_top_bottomtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 13px;
    }
    .index_content_item_top{
      width: 118px;
      height: 58px;
      background-color: rgba(0,0,0,0.3);
    }
    .index_content_top_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 12px;
    }
    .index_content_conter{
      width: 118px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 20px;
      margin-right: 20px;
      padding-bottom: 20px;
    }
    .index_content_bottom_li{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 100%;
      margin-bottom: 10px;
    }
    .index_content_bottom_ui{
      width: 100%;
      padding-right: 20px;
    }
    .index_skills{
      width: 100%;
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 18px;
      margin-right: 18px;
      margin-bottom: 20px;
    }
    .index_skills_item_img{
      width: 31px;
      height: 31px;
      background-color: aqua;
    }
    .index_skills_item_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 12px;
    }
    .index_skills_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 5px;
    }
    .index_skills_box{
      width: 460px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
  }
  @media screen and (min-width: 330px) and (max-width: 749px) {
    .index_Content{
      background-color: rgb(237,237,237);
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Conter{
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Content_header{
      font-size: 21px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .index_content_box{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 320px;
      flex-wrap: wrap;
    }
    .index_content_boxTwo{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 320px;
      flex-wrap: wrap;
    }
    .index_content_item{
      width: 118px;
      height: 192px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .index_content_bottom{
      width: 200px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .index_content_item_line{
      width: 118px;
      height: 4px;
      background-color: rgb(0,181,255);
    }
    .index_content_item_logo{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
    }
    .index_content_bottom_logo{
      width: 50px;
      height: 50px;
      border-radius: 6px;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
    }
    .index_content_item_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 35px;
    }
    .index_content_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 83px;
      text-align: center;
      margin-top: 30px;
    }
    .index_content_item_bottomtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 10px;
    }
    .index_content_top_bottomtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 13px;
    }
    .index_content_item_top{
      width: 118px;
      height: 58px;
      background-color: rgba(0,0,0,0.3);
    }
    .index_content_top_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 12px;
    }
    .index_content_conter{
      width: 118px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 20px;
      margin-right: 20px;
      padding-bottom: 20px;
    }
    .index_content_bottom_li{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 100%;
      margin-bottom: 10px;
    }
    .index_content_bottom_ui{
      width: 100%;
      padding-right: 20px;
    }
    .index_skills{
      width: 100%;
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 18px;
      margin-right: 18px;
      margin-bottom: 20px;
    }
    .index_skills_item_img{
      width: 31px;
      height: 31px;
      background-color: aqua;
    }
    .index_skills_item_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 12px;
    }
    .index_skills_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 5px;
    }
    .index_skills_box{
      width: 460px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
  }
  @media screen and (min-width: 750px) and (max-width: 919px) {
    .index_Content{
      background-color: rgb(237,237,237);
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Conter{
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Content_header{
      font-size: 21px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .index_content_box{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 650px;
    }
    .index_content_boxTwo{
      display: flex;
      justify-content: center;
      align-items: center;
      /*width: 650px;*/
      flex-wrap: wrap;
    }
    .index_content_item{
      width: 118px;
      height: 192px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .index_content_bottom{
      width: 200px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .index_content_item_line{
      width: 118px;
      height: 4px;
      background-color: rgb(0,181,255);
    }
    .index_content_item_logo{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
    }
    .index_content_bottom_logo{
      width: 50px;
      height: 50px;
      border-radius: 6px;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
    }
    .index_content_item_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 35px;
    }
    .index_content_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 83px;
      text-align: center;
      margin-top: 30px;
    }
    .index_content_item_bottomtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 10px;
    }
    .index_content_top_bottomtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 13px;
    }
    .index_content_item_top{
      width: 118px;
      height: 58px;
      background-color: rgba(0,0,0,0.3);
    }
    .index_content_top_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 12px;
    }
    .index_content_conter{
      width: 118px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 20px;
      margin-right: 20px;
      padding-bottom: 20px;
    }
    .index_content_bottom_li{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 100%;
      margin-bottom: 10px;
    }
    .index_content_bottom_ui{
      width: 100%;
      padding-right: 20px;
    }
    .index_skills{
      width: 100%;
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 18px;
      margin-right: 18px;
      margin-bottom: 20px;
    }
    .index_skills_item_img{
      width: 31px;
      height: 31px;
      background-color: aqua;
    }
    .index_skills_item_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 12px;
    }
    .index_skills_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 5px;
    }
    .index_skills_box{
      width: 460px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
  }
  @media screen and (min-width: 920px) {
    .index_Content{
      background-color: rgb(237,237,237);
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Conter{
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Content_header{
      font-size: 21px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .index_content_box{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 650px;
    }
    .index_content_boxTwo{
      display: flex;
      justify-content: center;
      align-items: center;
      /*width: 650px;*/
      flex-wrap: wrap;
    }
    .index_content_item{
      width: 118px;
      height: 192px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .index_content_bottom{
      width: 200px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .index_content_item_line{
      width: 118px;
      height: 4px;
      background-color: rgb(0,181,255);
    }
    .index_content_item_logo{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
    }
    .index_content_bottom_logo{
      width: 50px;
      height: 50px;
      border-radius: 6px;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
    }
    .index_content_item_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 35px;
    }
    .index_content_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 83px;
      text-align: center;
      margin-top: 30px;
    }
    .index_content_item_bottomtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 10px;
    }
    .index_content_top_bottomtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 13px;
    }
    .index_content_item_top{
      width: 118px;
      height: 58px;
      background-color: rgba(0,0,0,0.3);
    }
    .index_content_top_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 12px;
    }
    .index_content_conter{
      width: 118px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 20px;
      margin-right: 20px;
      padding-bottom: 20px;
    }
    .index_content_bottom_li{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 100%;
      margin-bottom: 10px;
    }
    .index_content_bottom_ui{
      width: 100%;
      padding-right: 20px;
    }
    .index_skills{
      width: 100%;
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 18px;
      margin-right: 18px;
      margin-bottom: 20px;
    }
    .index_skills_item_img{
      width: 31px;
      height: 31px;
      background-color: aqua;
    }
    .index_skills_item_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 12px;
    }
    .index_skills_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 5px;
    }
    .index_skills_box{
      width: 920px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
